<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>登录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div class=login-page id="login-page">
    <div class="row title"><span>挂号预约系统</span></div>

    <div class="form-wrapper">
        <form action="#" method="post">
            <div class="tab-box">
                <span class="selected"><a href="login.html">登录</a></span>
                <span><a href="register.html">注册</a></span>
            </div>
            <div class="row"><input id="username" name="username" placeholder="请输入手机号" type="text" v-model="phone">
            </div>
            <div class="row"><input id="pswd" name="pswd" placeholder="请输入密码" type="password" v-model="password">
            </div>

            <div class="row">
                <!--                <input type="submit" value="登 录" class="btn" @click="loginSubmit">-->
                <div @click="loginSubmit" class="btn">登 录</div>
            </div>
        </form>
    </div>
</div>

</body>
<script src="assets/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="api/login.js"></script>

<script>

    new Vue({
        el: '#login-page',
        data: function () {
            return {
                phone: '',
                password: ''
            }
        },
        methods: {
            loginSubmit() {
                console.log('login')
                api.request(
                    'UserMethodServlet',
                    'GET',
                    {
                        phoneNumber: this.phone,
                        password: this.password
                    },
                    function (response) {
                        console.log(response);
                        if(response.status==200) {
                            localStorage.removeItem('user');
                            localStorage.setItem('user', JSON.stringify(response.data));
                            console.log(response.data)
                            let tmp = localStorage.getItem('user');
                            console.log(tmp)
                            ELEMENT.Message({
                                message: '登录成功！',
                                type: 'success'
                            });
                            window.location = "main.jsp"
                        }
                        else {
                            ELEMENT.Message.error('登录失败：账号或密码错误');
                        }
                    },
                    function (error) {
                        console.error(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    }
                );
            }

        }
    })

</script>
<style>
    body {
        padding: 0;
        margin: 0;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    .login-page {
        width: 100%;
        height: 100vh;
        background: url("assets/img/main-bg4.png") no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .form-wrapper {
        width: 20vw;
        /*height: 25vw;*/
        border-radius: 0.5vw;
        background: rgba(255, 255, 255, 0.3);
        padding: 1vw;
    }

    .form-wrapper form {
        background-color: #fff;
        border-radius: 0.5vw;
        padding: 1.5vw;
        margin: 0;
    }

    .row {
        display: flex;
        justify-content: space-between;
        padding: 0.4vw 0;
    }

    .title {
        font-size: 2vw;
        font-weight: 700;
        color: #fff;
        margin-bottom: 1vw;
    }

    .form-wrapper .tab-box {
        display: flex;
        justify-content: start;
        margin-bottom: 0.5vw;
    }

    .tab-box span {
        padding: 0.4vw 1.5vw;
        font-size: 1.1vw;
    }

    .tab-box .selected {
        border-bottom: 3px solid #409EFF;
    }

    .form-wrapper form input {
        width: 100%;
        padding: 0.7vw 0.5vw;
        border: 1px solid #ddd;
        border-radius: 0.25vw;
        font-size: 0.9vw;
    }

    input:focus {
        outline: none;
    }

    .row .btn {
        width: 100%;
        padding: 0.7vw 0.5vw;
        border: 1px solid #ddd;
        border-radius: 0.25vw;
        font-size: 0.9vw;
        margin: 1vw 0 1vw;
        background-color: #409EFF;
        color: #fff;
        text-align: center;
        user-select:none;
    }
</style>
</html>
